<template>
  <m-container class="in-work">
    <in-work-scan @change="handleChange" :palletCode="form.palletCode" scan />
    <in-work-cell :modal="form" :border="false">
      <m-popover :list="enterList.arr" slot="link" label="label" @choose="handleChoose">
        <view slot="reference" class="btn">
          <m-text :line="1" :size="30">{{ form.enterpriseName || '请选择' }} </m-text>
          <m-icon name="arrow-down" size="25" margin-left="10" />
        </view>
      </m-popover>
      <view class="container">
        <view class="row">
          <view class="item">
            <text class="title">入库类型</text>
            <text>{{ map[form.sourceType] }}</text>
          </view>
          <view class="item">
            <text class="title">操作员</text>
            <text>{{ userList.map[form.operName] }}</text>
          </view>
          <view class="item">
            <text class="title">审核人</text>
            <m-popover :list="userList.arr" @choose="handleChooseAuditName">
              <text slot="reference">{{ userList.map[form.auditName] || '请选择' }}</text>
            </m-popover>
          </view>
        </view>
        <text class="tip">说明</text>
        <m-textarea placeholder="请填写说明文字" limitPosition="right" v-model="form.summary" />
      </view>
    </in-work-cell>

    <m-fixed>
      <m-button width="100%" size="xl" @click="handleClickAdd" :disabled="!form.palletCode">添加仓库SKU</m-button>
    </m-fixed>
  </m-container>
</template>

<script>
import { router } from '@/router'
import dayjs from 'dayjs'
import { getDicts } from '@/api/modules/dict'
import { checkPalletCode } from '@/api/modules/in-work'
import { isAppPlus } from '@/utils/platform'
import deepClone from '@/utils/deep-clone'
import { mapState } from 'vuex'

export default {
  data() {
    return {
      summary: '',
      form: {
        addType: 'fast',
        inOrderCode: '',
        theme: '',
        operName: '',
        auditName: '',
        sourceType: '',
        tenantId: '',
        summary: '',
      },
      map: {},
    }
  },
  computed: {
    ...mapState({
      userList: (state) => state.cache.userList,
      enterList: (state) => state.cache.enterList,
      userInfo: (state) => state.login.userInfo,
    }),
  },
  onShow() {
    this.initData()
  },
  async onLoad() {
    const { map, data } = await getDicts('ims_order_source_type') // 入库类型
    this.map = map
    this.form.sourceType = Number(data[0].value)
  },

  methods: {
    async initData() {
      this.form = {
        ...this.form,
        inOrderCode: 'IWMS' + dayjs().format('YYYYMMDDHHmmss') + Math.floor(Math.random() * 1000),
        theme: 'FUN-' + (dayjs() + '').slice(0, 7) + Math.floor(Math.random() * 1000),
        tenantId: this.enterList.arr.length ? this.enterList.arr[0].value : '',
        enterpriseName: this.enterList.arr.length ? this.enterList.arr[0].label : '',
        auditName: this.userInfo.userId + '',
        operName: this.userInfo.userId + '',
        palletCode: this.getPalletCode(),
      }
    },
    async handleChange(palletCode) {
      if (this.$Router.currentRoute.name !== 'InWork') {
        return
      }

      if (palletCode.startsWith('WMS-P-')) {
        const bool = await checkPalletCode({
          palletCode,
        })
        if (bool) {
          uni.showToast({
            title: '该托盘码已使用',
            icon: 'none',
          })
          return
        }
        this.form.palletCode = palletCode
      } else {
        uni.showToast({
          title: '请扫描正确的托盘码',
          icon: 'none',
        })
      }
    },
    getPalletCode() {
      return isAppPlus
        ? ''
        : 'WMS-P-' +
            Math.floor(Math.random() * 1000000)
              .toString()
              .padStart(6, '0')
    },
    handleChoose(e) {
      this.form.tenantId = e.value
      this.form.enterpriseName = e.label
    },
    handleClickAdd() {
      this.$store.commit('inWork/setFromInfo', deepClone(this.form))
      router.push({
        name: 'AddInWork',
      })

      this.form.palletCode = this.getPalletCode()
    },
    handleChooseAuditName(e) {
      this.form.auditName = e.value
    },
  },
}
</script>

<style lang="scss" scoped>
.in-work {
  .container {
    padding: 0 20rpx 20rpx;
    .row {
      display: flex;
      justify-content: space-around;
      background: rgba(245, 251, 253, 1);
      padding: 20rpx 0;
      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        text-align: center;
        font-size: 32rpx;
        flex: 0.333;
        .title {
          color: #748da7;
          font-size: 26rpx;
          margin-bottom: 20rpx;
        }
        &:nth-child(2) {
          &::before,
          &::after {
            content: '';
            width: 0.5rpx;
            height: 98%;
            background-color: #ede7e7;
            margin-top: 10rpx;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
          }
          &::before {
            margin-right: 10rpx;
          }
          &::after {
            margin-left: 10rpx;
            right: 0;
          }
        }
      }
    }
    .tip {
      padding: 20rpx 0;
      font-size: 24rpx;
      color: #637687;
      display: block;
    }
  }
  .btn {
    display: flex;
    align-items: center;
    width: 155rpx;
    height: 77rpx;
    border: 1rpx solid #d7dce0;
    border-radius: 12rpx;
    padding: 0 13rpx;
    justify-content: space-between;
    flex-shrink: 0;
  }
}
</style>
